<template>
	<view class="out">
		<view class="btn" v-for="(item,index) in datas" :key="index" :class="currentIndex===item.id?'btn-active':''"
			@click="chooseSize(index,item.name)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	/**
	 * @description: 按钮组件
	 * @property {Array} datas 数据列表
	 * @event changeSize 按钮改变事件
	 */
	export default {
		emits: ['changeSize'],
		data() {
			return {
				currentIndex: 0
			}
		},
		props: {
			datas: {
				type: Array,
				default: []
			},
		},
		methods: {
			chooseSize(index, size) {
				this.currentIndex = index
				this.$emit('changeSize', size)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.out {
		display: flex;
		flex-wrap: wrap;
	}

	.btn {
		text-align: center;
		background-color: #f7f8fa;
		border-radius: 10rpx;
		margin-right: $pd20;
		margin-bottom: $pd20;
		width: 80rpx;
		height: 50rpx;
		line-height: 50rpx;
		cursor: pointer;
	}

	.btn-active {
		color: #f24f62;
		background-color: #fde6e9;
	}
</style>
